<template>
    <div>
        <div class="container">
            <h1>待入库包裹</h1>
            <el-divider></el-divider>
            <div class="handle-box">
                <div style="margin-left: 92%">
                    <el-button type="success" @click="import_xlsx">导入<i class="el-icon-upload el-icon--right"></i></el-button>
                </div>
            </div>
            <el-table :data="expressInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe="" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="发件人:">
                                <span>{{ props.row.from_name }}</span>
                            </el-form-item>
                            <el-form-item label="收件人:">
                                <span>{{ props.row.to_name }}</span>
                            </el-form-item>
                            <el-form-item label="发件人电话:">
                                <span>{{ props.row.from_tel }}</span>
                            </el-form-item>
                            <el-form-item label="收件人电话:">
                                <span>{{ props.row.to_tel }}</span>
                            </el-form-item>
                            <el-form-item label="发件地址:">
                                <span>{{ props.row.from_address }}</span>
                            </el-form-item>

                            <el-form-item label="收件人地址:">
                                <span>{{ props.row.to_address }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                    <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="快递单号" prop="express_id"> </el-table-column>
                <el-table-column label="快递公司" prop="company_name"> </el-table-column>
                <el-table-column label="创建时间" sortable prop="time"> </el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 0" type="danger">未入库</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="import_edit(scope.$index, scope.row)" type="text" size="small">入库</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 取货码分配 -->
            <template>
                <el-dialog title="取货码分配" @close="dialog_close" :visible.sync="editVisible_import" width="30%">
                    <el-form ref="importForm" v-loading="loading" :model="importForm" label-width="70px">
                        <el-form-item label="快递单号">
                            <el-input v-model="importForm.express_id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="货架号">
                            <el-select
                                v-model="importForm.shelves_number"
                                clearable
                                @clear="clear_shelves"
                                @change="shelves_change"
                                placeholder="货架号"
                            >
                                <el-option v-for="item in importForm.shelves" :key="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="层号">
                            <el-select
                                v-model="importForm.layers_number"
                                clearable
                                @clear="clear_layers"
                                @change="layers_change"
                                placeholder="层号"
                            >
                                <el-option v-for="item in importForm.layers" :key="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="空位号">
                            <el-select v-model="importForm.vacancy_number" clearable placeholder="空位号">
                                <el-option v-for="item in importForm.vacancy" :key="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="入库时间">
                            <el-date-picker
                                v-model="importForm.import_time"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible_import = false">取 消</el-button>
                        <el-button type="primary" @click="import_confirm">确 定</el-button>
                    </span>
                </el-dialog>
            </template>

            <template>
                <el-dialog title="批量导入快递信息" v-loading="loading" @close="close_dialog" :visible.sync="editVisible" width="30%">
                    <el-upload
                        class="upload-demo"
                        drag
                        ref="upload"
                        action="#"
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-remove="upload_remove"
                        :on-change="upload_change"
                        :on-success="upload_success"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">是否支持多选文件</div>
                    </el-upload>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible = false">取 消</el-button>
                        <el-button type="primary" @click="import_xlsx_confirm">确 定</el-button>
                    </span>
                </el-dialog>
            </template>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,20,30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="lenth"
                style="margin-left: 35%; margin-top: 20px"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
             //总数
            lenth: 0,
            //初始页
            currentPage: 1,
            //初始页大小
            pagesize: 10,
            files: [],
            fileList: [],
            editVisible: false,
            editVisible_import:false,
            loading: false,
            importForm: {
                express_id: '',
                take_code: '',
                import_time: '',
                vacancy: [],
                layers: [],
                shelves: [],
                vacancy_number: '',
                layers_number: '',
                shelves_number: ''
            },
            editVisible: false,
            value: null,

            param: {
                to_name: ''
            },
            expressInfo: []
        };
    },
    // 方法
    methods: {
        dialog_close(){ 
            this.$router.go(0);
        },
        handleSizeChange(val) {         
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        upload_success(){
            this.$refs.upload.clearFiles()
        },
        //监听文件移动时变化
        upload_remove(file, fileList) {
            this.fileList = fileList;
        },
        //监听文件改变时变化
        upload_change(file, fileList) {
            console.log(fileList);
            this.fileList = fileList;
        },
        //将文件上传到服务器
        import_xlsx_confirm() {
            this.loading = true;
            this.fileList.forEach((file) => {
                this.files.push(file.raw);
            });
            var formdata = new FormData();
            this.files.forEach((file) => {
                formdata.append('files', file);
            });
            console.log(formdata.getAll("files"));
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/upload',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.formdata=null;
                        _this.loading = false;
                        _this.$notify({
                            title: '成功',
                            message: '批量添加成功！',
                            type: 'success'
                        });
                      _this.fileList = [];
                      _this.files = [];
                    } else {
                        _this.loading = false;
                        _this.$notify.error({
                            title: '错误',
                            message: '添加失败！'
                        });
                    }
                })
                .catch(function (err) {
                    this.$notify.error({
                        title: '错误',
                        message: '程序出错！'
                    });
                });
        },
        import_xlsx() {
            this.editVisible = true;
        },
        clear_layers() {
            this.importForm.vacancy_number = null;
        },
        clear_shelves() {
            this.importForm.layers_number = null;
            this.importForm.vacancy_number = null;
        },
        //检测层号变化
        layers_change() {
            console.log(this.importForm.layers_number);
            let param = new URLSearchParams();
            param.append('shelves_layer_number', this.importForm.layers_number);
            param.append('shelves_number', this.importForm.shelves_number);
            if (this.importForm.shelves_number && this.importForm.layers_number) {
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'pickUpCode/queryShelvesLayerOnNumber',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.importForm.vacancy = res.data.date;
                        } else {
                            // _this.expressInfo = null;
                            // _this.$message('暂时没有该分类下的快递信息！');
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        },
        //货号变化
        shelves_change() {
            console.log(this.importForm.shelves_number);
            let param = new URLSearchParams();
            param.append('shelvesNumber', this.importForm.shelves_number);
            if (this.importForm.shelves_number) {
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'pickUpCode/queryShelvesLayerNumber',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.importForm.layers = res.data.date;
                        } else {
                            // _this.expressInfo = null;
                            // _this.$message('暂时没有该分类下的快递信息！');
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        },
        //入库提交
        import_confirm() {
            this.loading = true;
            console.log(this.importForm);
            let param = new URLSearchParams();
            param.append('express_id', this.importForm.express_id);
            param.append('vacancy_number', this.importForm.vacancy_number);
            param.append('layers_number', this.importForm.layers_number);
            param.append('shelves_number', this.importForm.shelves_number);
            if (this.importForm.shelves_number && this.importForm.layers_number && this.importForm.vacancy_number) {
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'import/expressUp',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.loading = false;
                           
                            _this.editVisible_import=false;
                             _this.$message.success('入库成功！');
                            // _this.$router.go(0);
                        } else {
                            // _this.expressInfo = null;
                            // _this.$message('暂时没有该分类下的快递信息！');
                            _this.loading = false;
                            _this.$message.error('入库失败');
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        },
        //入库编辑
        import_edit(index, row) {
            this.importForm.express_id = row.express_id;
            this.editVisible_import = true;
            const _this = this;
            this.$axios({
                method: 'GET',
                url: 'pickUpCode/queryShelvesNumber',
                // data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.importForm.shelves = res.data.date;
                    } else {
                        _this.$message('初始失败！');
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //获取页面初始数据
        create_met() {
            let param = new URLSearchParams();
            param.append('state', 0);
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/getExpressInfo',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.expressInfo = res.data.result;
                        _this.lenth = _this.expressInfo.length;
                    } else {
                        // _this.$message.err('删除失败！');
                        // _this.$message.
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数-进入页面先执行
    created() {
        this.create_met();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>